<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<HeadNav titleName="" :topheight="navBarHeight">
			<template v-slot:rightIcon>
				<view class="j-txt" @click="jumpSetName">跳过</view>
			</template>
		</HeadNav>
		<view class="main">
			<view class="main-tit">验证助记词</view>
			<view class="word-wrap no-stn">
				<view class="word-wbox" v-for="(item,index) in selectedArr">
					<view class="word-text">
						{{ item.text }}
						<text @click="removeItem(item,index)">×</text>
						<!-- <icon type="clear" size="14" @click="removeItem(item,index)" class="icon" color="#ccc"></icon> -->
					</view>
					
				</view>
			</view>

			<view class="word-wrap">
				<view class="word-wbox" v-for="(item,index) in disArr" @click="selectWord(item,index)">
					<view>{{ item.text }}</view>
				</view>
			</view>

			<!-- <button @click="confim">确定</button> -->


			<view class="footer">
				<view @click="confim">完成</view>
			</view>

			<!-- <view class="vfn-area">
					
				</view> -->
		</view>
	</view>
</template>

<script>
	import { throttle } from '@/utils/common.js'
	import HeadNav from "@/components/HeadNav"
	import { registerApi } from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				selectedArr: [],
				disArr: [], // 乱序数组
				unTouchDisArr: [],
				db: ''
			}
		},
		mixins: [navBarMixin],
		components: {
			HeadNav
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			jumpSetName() {
				// console.log('先===',this.unTouchDisArr)
				
				const ordArr = this.sortByInt(JSON.parse(JSON.stringify(this.unTouchDisArr)),'parentIndex')
				
				const wordArray = ordArr.map(item => {
					return item.text
				})
				
				console.log('this.db===',this.db)
				
				
				// console.log('后====',this.unTouchDisArr)
				
				uni.reLaunch({
					url: '/pages/login/setName?data=' + JSON.stringify(wordArray) + '&db=' + JSON.stringify(this.db)
				})
			},
			
			removeItem(item, index) {
				this.selectedArr.splice(index, 1)
				this.disArr[item.selfIndex] = item
				this.$forceUpdate()
			},
			selectWord(item, index) {
				if(!item) return
				this.selectedArr.push(item)
				this.disArr[index] = ''
			},

			// 按类型为Number的属性排序
			sortByInt(array, key) {
				return array.sort(function(b, a) {
					var x = a[key]
					var y = b[key]
					return y - x
				})
			},

			confim() {
				throttle(async () => {
					if (this.selectedArr.length != 12) {
						uni.showToast({
							title: '请填写完助记词',
							icon: 'none'
						})
						return
					}

					let verFlag = this.selectedArr.every((item, index) => {
						return item.parentIndex == index
					})

					console.log('verFlag==', verFlag)

					if (!verFlag) {
						uni.showToast({
							title: '助记词顺序错误',
							icon: 'none'
						})
						return
					}

					// console.log('this.disArr===',this.disArr)
					const copyArr = JSON.parse(JSON.stringify(this.selectedArr))

					console.log('copyArr===', copyArr)
					const crr = this.sortByInt(copyArr, 'parentIndex')

					console.log('crr==', crr)
					console.log(this.disArr)
					const wordArray = crr.map(item => {
						return item.text
					})

					console.log('wordArray', wordArray)
					
					uni.reLaunch({
						url: '/pages/login/setName?data=' + JSON.stringify(wordArray) + '&db=' + JSON.stringify(this.db)
					})
					
				}, 4000)

			},
		},

		onLoad(options) {
			// console.log('qqqqq===',JSON.parse(options.db))
			// console.log('wwwww===',JSON.parse(options.data))

			this.db = JSON.parse(options.db)
			// this.phone = JSON.parse(options.db).phone

			this.disArr = JSON.parse(options.data)
			
			this.unTouchDisArr = JSON.parse(options.data)
		
			
		}

	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;
		min-height: 100vh;
		background: #fff;
		box-sizing: border-box;

		.back {
			image {
				width: 20rpx;
				height: 37rpx;
			}
		}
		
		.j-txt {
			font-size: 28rpx;
			color: #3F93FF;
		}

		.head {
			position: fixed;
			top: 0;
			z-index: 1;
			width: 100%;
			background: #fff;

			.head-np {
				display: flex;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
			}
		}

		.main {
			margin-top: 65rpx;
			padding: 0 30rpx;

			.main-tit {
				font-size: 48rpx;
				color: #333;
				font-weight: bold;
				text-align: center;
			}

			.word-wrap {
				min-height: 288rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin: 0 -7rpx;
				margin-top: 80rpx;
				// padding: 14rpx;
				// background: #F8F8F8;
				border-radius: 10rpx;

				.word-wbox {
					width: 25%;
					padding: 0 7rpx;
					box-sizing: border-box;

					&>view {
						margin: 15rpx 0;
						height: 70rpx;
						line-height: 70rpx;
						background: #eee;
						border-radius: 6rpx;
						color: #333;
						position: relative;
						text-align: center;
						font-size: 28rpx;
					}
				}


				&.no-stn {
					display: block;
					justify-content: flex-start;
					.word-wbox {
						display: inline-block;
						margin: 15rpx 0;
						.word-text {
							margin: 0;
							position: relative;
							background: none;
							border: 2rpx dashed #4d9bfd;
							text {
								position: absolute;
								left: 100%;
								transform: translate(-50%,-50%);
								width: 30rpx;
								height: 30rpx;
								text-align: center;
								line-height: 26rpx;
								color: #fff;
								border: 2rpx solid #4d9bfd;
								border-radius: 50%;
								background: #4d9bfd;
								// border-radius: ;
							}
						}
						
					}

				}

			}

			.footer {
				padding: 0 35rpx;
				margin-top: 100rpx;

				&>view {
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					background: $theme-color-a;
					border-radius: 40rpx;
				}
			}
		}
	}
</style>